<template>
  <view class="container">
    <view v-for="item in requestList" :key="item.usageId" class="request-card">
      <view class="row"><text class="label">申请人：</text>{{ item.applicantId }}</view>
      <view class="row"><text class="label">物品ID：</text>{{ item.itemId }}</view>
      <view class="row"><text class="label">数量：</text>{{ item.quantity }}</view>
      <view class="row"><text class="label">用途：</text>{{ item.purpose }}</view>
      <view class="row"><text class="label">预计归还日期：</text>{{ item.expectedReturnDate }}</view>
      <button class="return-btn" @tap="showReturnPrompt(item.usageId)">归还</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      requestList: []
    };
  },
  onLoad() {
    this.loadRequests();
  },
  methods: {
    async loadRequests() {
      try {
        const res = await uni.request({
          url: 'http://localhost:10010/item/getAllRequests',
          method: 'POST',
          data: {
            applicantId: '',
            itemId: '',
            taskId: '',
            status: '1',
            pageNum: 1,
            pageSize: 10
          },
          header: {
            'content-type': 'application/json'
          }
        });

        if (res.data.code === 200) {
          this.requestList = res.data.data.list;
        } else {
          uni.showToast({ title: res.data.message || '获取失败', icon: 'none' });
        }
      } catch (err) {
        uni.showToast({ title: '请求错误', icon: 'none' });
      }
    },

    // 弹出归还状态输入框
    showReturnPrompt(usageId) {
      uni.showModal({
        title: '填写物品归还状态',
        editable: true,
        placeholderText: '请输入物品状态，如“良好”或“损坏”',
        success: (res) => {
          if (res.confirm && res.content) {
            this.returnItem(usageId, res.content);
          } else if (res.confirm && !res.content) {
            uni.showToast({ title: '请输入归还状态', icon: 'none' });
          }
        }
      });
    },

    // 归还接口提交
    async returnItem(usageId, condition) {
      try {
        const res = await uni.request({
          url: `http://localhost:10010/item/returnItem?id=${usageId}&condition=${encodeURIComponent(condition)}`,
          method: 'POST'
        });

        if (res.data.code === 200) {
          uni.showToast({ title: res.data.message || '归还成功', icon: 'success' });
          this.loadRequests(); // 刷新
        } else {
          uni.showToast({ title: res.data.message || '归还失败', icon: 'none' });
        }
      } catch (err) {
        uni.showToast({ title: '归还请求失败', icon: 'none' });
      }
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
}

.request-card {
  background: #ffffff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx;

  .row {
    font-size: 28rpx;
    margin-bottom: 10rpx;

    .label {
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }
  }

  .return-btn {
    margin-top: 20rpx;
    background-color: #4CAF50;
    color: white;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 12rpx;
    text-align: center;
    font-size: 30rpx;
  }
}
</style>
